<template>
  <div class="container">
    <div
      class="send-input"
      ref="inputRef"
      contenteditable="true"
      @keydown="handleKeydown"
    ></div>
    <el-button class="send-btn" type="primary" size="default" @click="submit"
      >发送</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from "vue";
// import { debounce } from "@/utils/utils.js";
const emit = defineEmits(["submit"]);

const value = ref("");

const inputRef = ref<HTMLElement>();

// const handlerSubmit = debounce(() => {
//   const message = {
//     from: "",
//     to: "",
//     type: "",
//     content: "",
//   };
//   // TODO 发送消息
// }, 300);

function submit(e: any) {
  if (inputRef.value!.innerHTML == "") return;
  emit("submit", inputRef.value?.innerHTML);
  inputRef.value!.innerHTML = "";
}

//换行并重新定位光标位置
function textareaRange() {
  const el: any = inputRef.value;
  const range = document.createRange();
  //返回用户当前的选区
  const sel: any = getSelection();
  //获取当前光标位置
  const offset = sel.focusOffset;
  //div当前内容
  const content = el.innerHTML;
  //添加换行符\n
  el.innerHTML = content.slice(0, offset) + "\n" + content.slice(offset);
  console.log(el.innerHTML);

  nextTick(() => {
    //设置光标为当前位置
    range.setStart(el.childNodes[0], offset + 1);
    //使得选区(光标)开始与结束位置重叠
    range.collapse(true);
    //移除现有其他的选区
    sel.removeAllRanges();
    //加入光标的选区
    sel.addRange(range);
  });

  // requestAnimationFrame(() => {
  //   //设置光标为当前位置
  //   range.setStart(el.childNodes[0], offset + 1);
  //   //使得选区(光标)开始与结束位置重叠
  //   range.collapse(true);
  //   //移除现有其他的选区
  //   sel.removeAllRanges();
  //   //加入光标的选区
  //   sel.addRange(range);
  // });
}

function handleKeydown(event: any) {
  // console.log(event);

  if (event.altKey && event.keyCode === 13) {
    console.log("Alt + Enter");

    //ctrl+enter
    textareaRange();
  } else if (event.keyCode === 13) {
    //enter
    submit(event);
    event.preventDefault(); // 阻止浏览器默认换行操作
    return false;
  }
  // if (!e.altKey && e.key == "Enter") {
  //   return submit(e);
  // }
  // if (e.altKey && e.key === "Enter") {
  //   e.preventDefault(); // 阻止 Enter 键的默认行为
  //   // const cursorPos = inputRef.value?.selectionStart;
  //   const selection = getSelection();
  //   let range = selection?.getRangeAt(0);
  //   range?.startOffset;
  //   const value = e.target?.innerHTML;
  // }
}
</script>

<style scoped lang="less">
.send-input {
  // writing-mode: horizontal-tb !important;
  //   font-style: ;
  //   font-variant-ligatures: ;
  //   font-variant-caps: ;
  //   font-variant-numeric: ;
  //   font-variant-east-asian: ;
  //   font-variant-alternates: ;
  //   font-weight: ;
  //   font-stretch: ;
  //   font-size: ;
  //   font-family: monospace;
  //   font-optical-sizing: ;
  //   font-kerning: ;
  //   font-feature-settings: ;
  //   font-variation-settings: ;
  //   text-rendering: auto;
  //   color: fieldtext;
  //   letter-spacing: normal;
  //   word-spacing: normal;
  //   line-height: normal;
  //   text-transform: none;
  //   text-indent: 0px;
  //   text-shadow: none;
  //   display: inline-block;
  //   text-align: start;
  //   appearance: auto;
  //   -webkit-rtl-ordering: logical;
  //   resize: auto;
  //   cursor: text;
  //   white-space: pre-wrap;
  //   overflow-wrap: break-word;
  //   background-color: field;
  //   column-count: initial !important;
  //   margin: 0em;
  //   border-width: 1px;
  //   border-style: solid;
  //   border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  //   border-image: initial;
  //   padding: 2px;
  width: 100%;
  // max-width: 35em;
  height: 10rem;
  background: #fff;
  padding: 5px;
  border-radius: var(--border-radius);
  transition: all 0.2s linear;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  // position: absolute;

  &:empty::before {
    content: "按回车发送消息(Alt + Enter换行)";
    color: #777;
  }

  &:focus {
    outline: none;
    border: 1px solid var(--app-main-color);
  }
}

.send-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
</style>
